<template>
  <div class="settings-management">
    <div class="page-header">
      <h2>店铺设置</h2>
      <el-button type="primary" @click="saveSettings">保存设置</el-button>
    </div>

    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本信息" name="basic">
        <el-form :model="basicInfo" label-width="120px" class="settings-form">
          <el-form-item label="店铺名称">
            <el-input v-model="basicInfo.shopName" />
          </el-form-item>
          <el-form-item label="店铺Logo">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :auto-upload="false"
            >
              <img v-if="basicInfo.logo" :src="basicInfo.logo" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="basicInfo.phone" />
          </el-form-item>
          <el-form-item label="客服邮箱">
            <el-input v-model="basicInfo.email" />
          </el-form-item>
          <el-form-item label="营业时间">
            <el-time-picker
              v-model="basicInfo.businessHours.start"
              placeholder="开始时间"
            />
            <span class="mx-2">至</span>
            <el-time-picker
              v-model="basicInfo.businessHours.end"
              placeholder="结束时间"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="物流设置" name="logistics">
        <el-form :model="logisticsSettings" label-width="120px" class="settings-form">
          <el-form-item label="发货地址">
            <el-cascader
              v-model="logisticsSettings.address"
              :options="addressOptions"
              placeholder="请选择省市区"
            />
            <el-input
              v-model="logisticsSettings.detailAddress"
              placeholder="详细地址"
              style="margin-top: 10px"
            />
          </el-form-item>
          <el-form-item label="物流公司">
            <el-checkbox-group v-model="logisticsSettings.companies">
              <el-checkbox label="sf">顺丰快递</el-checkbox>
              <el-checkbox label="zt">中通快递</el-checkbox>
              <el-checkbox label="yd">韵达快递</el-checkbox>
              <el-checkbox label="ems">EMS</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="运费设置">
            <el-radio-group v-model="logisticsSettings.feeType">
              <el-radio value="fixed">固定运费</el-radio>
              <el-radio value="weight">按重量计费</el-radio>
            </el-radio-group>
            <template v-if="logisticsSettings.feeType === 'fixed'">
              <el-input-number
                v-model="logisticsSettings.fixedFee"
                :min="0"
                :precision="2"
                style="margin-top: 10px"
              />
            </template>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="安全设置" name="security">
        <el-form :model="securitySettings" label-width="120px" class="settings-form">
          <el-form-item label="登录密码">
            <el-button @click="showChangePasswordDialog">修改密码</el-button>
          </el-form-item>
          <el-form-item label="安全手机">
            <el-input v-model="securitySettings.phone" disabled>
              <template #append>
                <el-button @click="showChangePhoneDialog">修改</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="登录验证">
            <el-switch
              v-model="securitySettings.twoFactorAuth"
              active-text="开启双重认证"
            />
          </el-form-item>
          <el-form-item label="操作通知">
            <el-checkbox-group v-model="securitySettings.notifications">
              <el-checkbox label="login">登录通知</el-checkbox>
              <el-checkbox label="order">订单通知</el-checkbox>
              <el-checkbox label="withdrawal">提现通知</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';

const activeTab = ref('basic');

// 基本信息
const basicInfo = ref({
  shopName: '我的零食店',
  logo: '',
  phone: '400-123-4567',
  email: 'support@example.com',
  businessHours: {
    start: new Date(2000, 1, 1, 9, 0),
    end: new Date(2000, 1, 1, 21, 0)
  }
});

// 物流设置
const logisticsSettings = ref({
  address: [],
  detailAddress: '',
  companies: ['sf', 'zt'],
  feeType: 'fixed',
  fixedFee: 10
});

// 安全设置
const securitySettings = ref({
  phone: '138****8888',
  twoFactorAuth: false,
  notifications: ['login', 'order']
});

// 模拟地址选项
const addressOptions = [
  {
    value: 'guangdong',
    label: '广东省',
    children: [
      {
        value: 'shenzhen',
        label: '深圳市',
        children: [
          { value: 'nanshan', label: '南山区' },
          { value: 'futian', label: '福田区' }
        ]
      }
    ]
  }
];

const saveSettings = () => {
  ElMessage.success('设置保存成功');
};

const showChangePasswordDialog = () => {
  ElMessage.info('修改密码功能待实现');
};

const showChangePhoneDialog = () => {
  ElMessage.info('修改手机号功能待实现');
};
</script>

<style scoped>
.settings-management {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

h2 {
  margin: 0;
  color: #2c3e50;
}

.settings-form {
  max-width: 600px;
  margin-top: 20px;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  line-height: 178px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.mx-2 {
  margin: 0 10px;
}
</style> 